<template>
  <section class="page">
    <!-- <div class="banner img_bg">
      <div class="rankInfo">
        <div class="part1">
          <div style='margin-left: 12px'>平均分： <span class="avgScore" style='font-size: 20px' >{{rankInfo.avgScore}}</span><span style="margin-left: 3px; width: 16px; height 20px; font-weight: 500">分</span></div>
          <div class="rate">
            <img src="@/assets/img/survey2.0/PK.png" alt="">
            <div class='box'>
              <span style='margin-right: 3px' class="opacity">击败了</span> <span style=" line-height 24px;color: #fff; opacity: 1;font-size: 16px">{{(rankInfo.topRate * 10000).toFixed(2)/100}}%</span><span style='margin-left: 3px;margin-right: 3px' class="opacity"> 的员工</span>
            </div>
          </div>
        </div>
        <div class="part2">当前排名：<span style="font-weight: 500;font-size: 16px">{{rankInfo.rankNum || '暂无'}}</span></div>
      </div>
      <div class="img_wrap">
        <img src="@/assets/img/survey2.0/user_examine_transcript_img.png"
             alt="">
      </div>
    </div> -->
    <div class="examine-box" v-for='(item, index) in list' :key='"item" + index'>
      <div class="examine-box-title">
        <span>{{item.title}}</span>
        <!-- <div class="examine-status" v-if='item.isPass'>
          <span>已通过</span>
        </div> -->
        <div class='examine-type examination'
             v-if='item.type === "EXAMINATION"'>
          考试
        </div>
        <div class='examine-type survey'
             v-if='item.type === "SURVEY"'>
          问卷
        </div>
        <div class='examine-type vote'
             v-if='item.type === "VOTE"'>
          投票
        </div>
        <!-- <div class='examine-type evaluation'
             v-if='item.type === "EVALUATION"'>
          测评
        </div> -->
      </div>
      <div class="examine-info" >
        <div class="examine-info-left">
          <span v-if='item.answerRecord && item.answerRecord.length && item.type !== "VOTE"'>
            最高得分：{{item.highestScore}}分
          </span>
          <span v-if='item.answerRecord && !item.answerRecord.length && item.type !== "VOTE"'>
            暂无得分记录
          </span>
        </div>
        <div class="examine-info-right"
            @click='enterTest(item)'
            v-if='item.answerRecord && item.answerRecord.length'>
          再次参与
        </div>
        <div class="examine-info-right start"
            @click='enterTest(item)'
            v-if='!item.answerRecord || (item.answerRecord && !item.answerRecord.length)'>
          立即参与
        </div>
        <!-- <div class="examine-info-right end"
            @click='enterTest(item)'
            v-if='item.type === "EXAMINATION" && !item.isPass && item.answerRecord && item.answerRecord.length'>
          补考
        </div> -->
      </div>
      <score-list
        v-if='item.answerRecord'
        :surveyId='item.surveyId'
        :title='item.title'
        :surveyType='item.type'
        :records='item.answerRecord'
        @enterRecord='enterRecord'>
      </score-list>
    </div>
    <div class='examine-none' v-show='!list[0] && !loading'>暂无问卷</div>
  </section>
</template>
<script>
import ScoreList from './components/scoreList'
// import { surveyList } from './list_mock.js'
export default {
  name: 'userExamineTranscript',
  components: {
    ScoreList
  },
  data () {
    return {
      rankInfo: {
        rankNum: '',
        topRate: 0,
        avgScore: ''
      },
      list: [],
      loading: true
    }
  },
  methods: {
    enterRecord (answer) {
      console.log('answer', answer)
      this.$router.push({ name: 'surveyNewRecord', params: { surveyId: answer.surveyId, answerId: answer.answerId } })
    },
    enterTest (survey) {
      if (survey.hasValid) {
        this.$toast('问卷已下线')
        return
      }
      this.$router.push({ name: 'surveyNewPaper', params: { surveyId: survey.surveyId } })
    },
    getTable () {
      this.$_load.show()
      this.loading = true
      this.title = this.$route.query.title
      let param = {
        currentPage: 1,
        pageSize: 999
      }
      let openid = sessionStorage.getItem('openid')
      let url = `${this.SERVICE_UPGRADE_SURVEY}/list/${sessionStorage.getItem('appid')}/${openid}`
      this.$get(url, param).then(res => {
        if (res.code === 200) {
          if (res.data) {
            this.list = res.data.list
            // 计算每个问卷的答题记录的最高得分
            this.list.forEach(qa => {
              let highestScore = 0
              qa.answerRecord.forEach(record => {
                if (record.score > highestScore) {
                  highestScore = record.score
                }
              })
              qa.highestScore = highestScore
            })
          }
        } else {
          this.$toast(res.message)
        }
        this.$_load.hide()
        this.loading = false
      })
    }
  },
  created () {
    this.getTable()
  }
}
</script>
<style lang="stylus" scoped>
.page
  background-color #f7f7f7
  padding 20px 0
.banner
  position relative
  margin-bottom 59px
  padding 25px 0 0 19px
  height 160px
  background-color transparent
  background-image url('~assets/img/survey2.0/user_examine_transcript_banner.png')
  .part1
    color #fff
    font-size 12px
    display flex
    justify-content space-between
    .rate
      display flex
      align-items center
      font-size 12px
      height 24px
      position relative
      img
        width 44px
        height 24px
        position absolute
        top 0
        left -40px
      .box
        display inline-block
        border 1px solid #DAEEFF
        border-image: -webkit-linear-gradient(#DAEEFF, #2271C1) 20 20
      .opacity
        opacity .6
        line-height 24px
        height 24px
        display inline-block
    .avgScore
      width:31px;
      height:20px;
      font-size:20px;
      font-weight:700;
      color:rgba(255,255,255,1);
      line-height:20px;
  .part2
    font-size: 12px;
    line-height: 32px;
    height: 32px;
    color: #fff;
    font-weight: 400;
  .img_wrap
    positionBL(6px, 50%, -50%, 40px)
    width 72px
.examine-box
  padding 0 10px
  box-sizing border-box
  width 100%
  margin-bottom 25px
  .examine-box-title
    display flex
    align-items center
    line-height 22px
    font-size 16px
    color #262626
    font-weight 600
    .examine-type
      flex none
      font-size 12px
      font-weight 500
      line-height 16px
      margin-left 4px
      color #fff
      padding 1px 4px
      &.examination
        // background #767de4
        background #1e7eff
      &.survey
        // background #1a83e6
        background #009668
      &.vote
        background #ff9800
      &.evaluation
        background #1ab3e6
    .examine-status
      margin-left 4px
      flex 0 0 40px
      height 16px
      display flex
      align-items center
      justify-content center
      background-image linear-gradient(to right, #f7ae1c, #fdd656)
      color #fff
      border-radius 3px
      span
        font-size 12px
        transform scale(.8)
  .examine-info
    display flex
    margin-top 5px
    align-items center
    justify-content space-between
    .examine-info-left
      font-size 14px
      color #262626
      opacity 0.6
    .examine-info-right
      background #e8f2fc
      border-radius 11px
      width 68px
      height 22px
      font-size 12px
      line-height 22px
      text-align center
      color #1A83E6
      &.start
        background-color #1A83E6
        color #fff
      &.end
        background-color #EE2F58
        color #fff
  .score-list
    margin-top 10px
    display flex
    flex-direction column
    border-radius 8px
    overflow hidden
    .score-item
      display flex
      height 68px
      padding-right 10px
      box-sizing border-box
      background-color #fff
      .score-item-content
        border-bottom 1px solid #f8f8f8
        flex 1
        display flex
        align-items center
        justify-content space-between
      .score-item-left-info
        font-size 14px
        color #262626
        line-height 20px
        .score-item-left-info-title
          font-size 14px
          color #262626
          line-height 20px
        .score-item-left-info-sub
          margin-top 2px
          opacity .4
          font-size 12px
          color #262626
      .score-item-right
        color #1A83E6
      .icon-wrap
        flex 0 0 49px
        height 100%
        display flex
        align-items center
        justify-content center
        .icon
          font-size 20px
          background-color #1a83e6
          border-radius 50%
          &.error
            background-color #fff
.examine-none
  text-align center
  color #aaa
  font-size 14px
  padding 20px 0
</style>
